<template>
  <div class="good-item" @click="openProduct(msg.id)">
	  	<span class="item-name">
	  		{{msg.productCategoryName}}
	  	</span>
      <div class="good-img">
          <img v-lazy="msg.pic" :alt="msg.name" :key="msg.pic">
      </div>
      <div class="good-info-box">
      	<h6 class="good-title" v-html="msg.name" :title="msg.name">{{msg.name}}</h6>
	      <div class="good-info">
	      	<div class="good-info-row">
	      		<span class="good-info-span title-a title-color">【主播担保 永久包赔】</span>
	      		<span class="good-info-span title-b" title="电信区-电信一区">{{msg.gameGroup ? msg.gameGroup+"-" : msg.gameGroup}}{{msg.gameServer}}</span>
	      	</div>
	      	<div class="good-info-row">
	      		<span class="good-info-span title-a">
	      			<!--<img style="vertical-align:middle;" src=""/>
	      			{{msg.createTime | formatDate}}-->
	      		</span>
	      		<span class="good-info-span title-b title-color">价格：￥{{Number(msg.price).toFixed(2)}} 元</span>
	      	</div>
	      </div>
      </div>
  </div>
</template>
<script>
  import YButton from '/components/YButton'
  import { mapMutations, mapState } from 'vuex'
  import { getStore } from '/utils/storage'
  import {formatDate} from '/api/date.js';
//import {currency} from '/api/utils'
  export default {
    props: {
      msg: {
        salePrice: 0
      }
    },
    data () {
      return {}
    },
    methods: {
      ...mapMutations(['ADD_CART', 'ADD_ANIMATION', 'SHOW_CART']),
      goodsDetails (id) {					//路由跳转暂未使用
        this.$router.push({path: 'levelingItem/id=' + id})
      },
      openProduct (id) {
        window.open('//' + window.location.host + '/levelingItem?id=' + id)
      }
    },
    computed: {
      ...mapState(['login', 'showMoveImg', 'showCart'])
    },
    mounted () {

    },
    filters: {
	    formatDate(time) {
	        var date = new Date(time);
	        return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
	    },
//		currency:currency
    },
    components: {
      YButton
    }
  }
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../assets/style/mixin";
  @import "../assets/style/theme";

  .good-item {
    background: #fff;
    width: 97%;
    height: 260px;
    overflow: hidden;
    margin: 10px 5px 10px 5px;
  }
  .item-name{
  	position: absolute;
		max-width: 23%;
  	padding-left: 10px;
  	padding-right: 10px;
  	height: 30px;
  	line-height: 30px;
  	color: white;
  	background-color: black;
  	opacity: .7;
  	margin: 5px;
  	border-radius: 5px;
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: nowrap;
  }
   .good-img {
    	overflow: hidden;
	    width: 100%;
	    height: 160px;
	    overflow: hidden;
    }
    .good-img img{
    	width: 100%;
	    display: inline-block;
	    vertical-align: top;
	    box-sizing: border-box;
	    transition: all .5s;
		}
    .good-img img:hover{
    	 transform: scale(1.3);
	    -ms-transform:scale(1.3);     /* IE 9 */
	    -moz-transform:scale(1.3);     /* Firefox */
	    -webkit-transform:scale(1.3); /* Safari 和 Chrome */
	    -o-transform:scale(1.3);
    }
    .good-price {
      height: 30px;
      text-align: center;
      line-height: 30px;
      color: #d44d44;
      font-family: Arial;
      font-size: 18px;
      font-weight: 700;
    }
    .good-info-box{
	    padding-bottom: 10px;
    	border: 1px solid #e2e2e2;
    }
    .good-title {
			font-size: 12px;
	    color: #424242;
	    padding: 0 14px;
	    height: 30px;
	    overflow: hidden;
    }
    .good-info-row{
			padding-top: 10px;
    	display: flex;
    	flex-direction: row;
    	padding-left: 5px;
    	padding-right: 5px;
    }
    .good-info-span{
	    width: 50%;
	    font-size: 12px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap
    }
    .title-a{
    	font-weight: bold;
    }
    .title-color{
    	color: #FF8700;
    }

    .title-b{
    	overflow: hidden;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	    text-align: right;
    }
    h3 {
      text-align: center;
      line-height: 1.2;
      font-size: 12px;
      color: #d0d0d0;
      padding: 10px;
    }

</style>
